<template>
  <view class="page container">
    <u-form
      :model="basicForm"
      :rules="rules"
      labelPosition="top"
      ref="form"
      labelWidth="auto"
      :labelStyle="{
        fontSize: '14px',
        color: '#B2B2B2',
        lineHight: '20px'
      }"
    >
      <view class="basic-style">
        <u-form-item label="物料小类" prop="provisionSmall" required>
          <h-dropdown
            class="w-100"
            keyName="categoryName"
            placeholder="请选择物料小类"
            :columns="smallList"
            v-model="basicForm.provisionSmall"
            dataKey="result"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{color: '#B2B2B2'}"
						
            @change="provisionSmallChange"
          />
        </u-form-item>
        <u-form-item label="物料名称" prop="materialName" required>
          <h-select-material-input-popup
            style="width: 100%"
            v-model="basicForm.materialName"
            placeholder="请选择物料名称"
            border="surround"
            :materialFlag="true"
						:multi="true"
            auditStatus="2"
            :provisionSmall="basicForm.provisionSmall"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{color: '#B2B2B2'}"
            @change="materialNameBack"
          ></h-select-material-input-popup>
        </u-form-item>
      </view>

      <view class="space-x-1 mt-1" style="display: flex">
				<u-button type="primary" text="关闭" :plain="true" :loading="loading" @click="onClose"></u-button>
        <u-button type="primary" text="保存" :loading="loading" @click="onSubmit"></u-button>
        
      </view>
    </u-form>
  </view>
</template>

<script>
import { queryProvisionBroadList, queryProvisionSmallList } from '@/api/purchase/ErpPurchaseCannibalizeForm'

export default {
  name: 'TenderMaterialForm',
  props: {
    teamId: {
      type: String,
      default: '',
    },
    companyId: {
      type: String,
      default: '',
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: null,
    },
    provisionBroad: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      api: {
        queryProvisionBroadList,
      },
      smallList: [],
			materialDetail: [], // 物料名称
      loading: false,
      basicForm: {
        provisionBroad: null, // 采购大类
        provisionSmall: null, // 采购小类
        materialBillId: null, // 物料编码
        materialName: null, // 物料名称
        specification: null, // 规格型号
        brand: null, // 品牌
        amount: null, // 数量
        unit: null, // 单位
        remark: null, // 备注
      },
      rules: {
        provisionSmall: [{ required: true, message: '请选择采购小类!', trigger: 'blur' }],
        materialName: [{ required: true, message: '请选择物料名称!', trigger: 'change' }],
        amount: [
          { required: true, message: '请输入数量!', trigger: 'blur' },
          { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数!' },
        ],
        budgetAmount: [
          { required: true, message: '请输入预算价格!', trigger: 'blur' },
          { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数!' },
        ],
      },
    }
  },
  created() {
    this.findProvisionSmallList(this.provisionBroad)
  },
  methods: {
    materialNameBack(material) {
			this.materialDetail = material
    },
    provisionSmallChange() {
      this.$set(this.basicForm, 'materialName', null)// 物料名称
      this.materialDetail = [] // 物料数组
    },
    findProvisionSmallList(value) {
      const parentId = value
      queryProvisionSmallList({ parentId }).then((res) => {
        if (res.success) {
          const data = res.result.map((item) => {
            return { id: item.id, categoryName: item.categoryName }
          })
          this.smallList = [data]
        } else {
          this.$u.toast(res.message)
        }
      })
    },
    reset() {
      this.$refs.form.resetFields()
			this.materialDetail = []
    },
    async onSubmit() {
      await this.$refs.form.validate()
      if (!this.index) {
        this.$emit('submit', this.basicForm, this.materialDetail)
      } else {
        this.$emit('submit', [this.basicForm, this.index], this.materialDetail)
      }
			this.$refs.form.resetFields()
			this.materialDetail = []
    },
    onClose() {
      this.$emit('close')
			this.$refs.form.resetFields()
			this.materialDetail = []
    },
  },
  watch: {
    provisionBroad: {
      handler(val) {
        if (val) {
          this.findProvisionSmallList(val)
        }
      },
      deep: true,
    },
  },
}
</script>

<style scoped></style>
